<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>1F钢架E化方案 - 后台管理 - 后台首页</title>
  <%@include file="/WEB-INF/common/css.jsp"%>
  <style>
  	.layui-form-checkbox span {
	    padding: 0 10px;
	    height: 100%;
	    font-size: 14px;
	    border-radius: 2px 0 0 2px;
	    background-color: #117582;
	    color: #fff;
	    overflow: hidden;
	    white-space: nowrap;
	    text-overflow: ellipsis;
	}
	.layui-form-checkbox span:hover {
		background-color: #5FB878;
	}
	.layui-form-checked span, .layui-form-checked:hover span {
	    background-color: #5FB878;
	}
  </style>
  <%@include file="/WEB-INF/common/topjs.jsp"%>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  
  <%@include file="/WEB-INF/common/admin/header.jsp"%>
  <%@include file="/WEB-INF/common/admin/menu.jsp"%>
  
  <div class="layui-body">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;">
    	<div class="layui-card">
		  <div class="layui-card-header layui-bg-green">用户信息</div>
		  <div class="layui-card-body" id="roleinfo">
		    <p>工号: ${obj.user.no }</p>
		    <p>姓名: ${obj.user.username }</p>
		  </div>
		</div>
		<div class="layui-card">
		  <div class="layui-card-header layui-bg-orange">角色信息</div>
		  <div class="layui-card-body">
		  	<div class="layui-form-item">
				<div class="layui-input-inline" style="width: 550px">
					 <div id="pager"></div>
				</div>
				<div class="layui-input-inline">
					<input type="text" id="inputSerach"
						placeholder="查询条件" autocomplete="off" class="layui-input">
				</div>
			</div>
		    <form class="layui-form" action="">
			  <div class="layui-form-item">
			    <label class="layui-form-label">未添加</label>
			    <div class="layui-input-block" id="noAddRolelist">
			      
			    </div>
			  </div>
			 
			  <div class="layui-form-item">
			    <div class="layui-input-block">
			      <button class="layui-btn" lay-submit lay-filter="addSelect">添加已选中</button>
			      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
			    </div>
			  </div>
			</form>
			<hr>
			<form class="layui-form" action="">
			  <div class="layui-form-item">
			    <label class="layui-form-label">已添加</label>
			    <div class="layui-input-block" id="addRolelist">
			      
			    </div>
			  </div>
			 
			  <div class="layui-form-item">
			    <div class="layui-input-block">
			      <button class="layui-btn" lay-submit lay-filter="deleteAddSelect">删除已选中</button>
			      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
			    </div>
			  </div>
			</form>
		  </div>
		</div>
    </div>
  </div>
  
  <%@include file="/WEB-INF/common/admin/footer.jsp"%>
  
</div>
<%@include file="/WEB-INF/common/bottomjs.jsp"%>
<script>
function setData(){
	setUpData();
	setDownData();
}

function setDownData(){
	$.ajax({
		url:"${base}/api/user/findRolesByUser.api",
    	type: "post",
    	headers: Apicheck.getHeaders(),
    	data: {id: "${obj.user.id}"},
    	success: function(result){
    		console.log(result);
    		$("#addRolelist").html("");
    		var roles = result.data.roles;
    		for(var i = 0; i < roles.length; i ++){
    			var html = '<input type="checkbox" name="id'+roles[i].id+'" title="'+roles[i].descript+'" >';
    			$("#addRolelist").append(html);
    			layui.form.render();
    			layui.form.on("submit(deleteAddSelect)", function(data){
    				var strIds = "";
    				for(var id in data.field){
    					strIds += "-" + id.replace("id", "");
    				}
    				$.ajax({
    					url:"${base}/api/user/removeUR.api",
    			    	type: "post",
    			    	headers: Apicheck.getHeaders(),
    			    	data: {userId: "${obj.user.id}", role: strIds.substr(1, strIds.length)},
    			    	success: function(result){
    			    		layer.msg(result.msg, {icon:6});
    			    		console.log(result);
    			    		if(result.code == 1001){
    			    			//location.reload();
    			    			setData();
    			    		}
    			    	}
    				});
    				return false;
    			});
    		}
    	}
	});
}
function setUpData(){
	$.ajax({
		url:"${base}/api/user/findRolesNotUser.api",
    	type: "post",
    	headers: Apicheck.getHeaders(),
    	data: {id: "${obj.user.id}", pager: pager, size: size, serach: serach},
    	success: function(result){
    		var laypage = layui.laypage;
    		laypage.render({
    		    elem: $('#pager'),
    		    curr: result.data.pager.pageNumber,
    		    limit: result.data.pager.pageSize,
    		    count: result.data.pager.recordCount, //数据总数，从服务端得到
    		    jump: function(obj, first){
    		        //obj包含了当前分页的所有参数，比如：
    		        if(!first){
    		        	pager = obj.curr;
    		        	size = obj.limit;
    		        	setUpData();
    		        }
    		    }
    		});
    		
    		$("#noAddRolelist").html("");
    		var roles = result.data.roles;
    		for(var i = 0; i < roles.length; i ++){
    			var html = '<input type="checkbox" name="id'+roles[i].id+'" title="'+roles[i].descript+'">';
    			$("#noAddRolelist").append(html);
    			layui.form.render();
    			layui.form.on("submit(addSelect)", function(data){
    				var strIds = "";
    				for(var id in data.field){
    					strIds += "-" + id.replace("id", "");
    				}
    				$.ajax({
    					url:"${base}/api/user/addUR.api",
    			    	type: "post",
    			    	headers: Apicheck.getHeaders(),
    			    	data: {userId: "${obj.user.id}", role: strIds.substr(1, strIds.length)},
    			    	success: function(result){
    			    		console.log(result);
    			    		layer.msg(result.msg, {icon:6});
    			    		if(result.code == 1001){
    			    			//location.reload();
    			    			setData();
    			    		}
    			    	}
    				});
    				return false;
    			});
    		}
    	}
	});
	
}

var serach = "", pager = 1, size = 30;
$(function(){
	setData();
	
	$("#inputSerach").change(function(){
		serach = $("#inputSerach").val();
		setUpData();
	});
})
</script>
</body>
</html>